
<template>
  <div class="databoard-container">
    <!-- 搜索框 -->
    <el-form :inline="true">
      <el-form-item label="选择日期">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
        <!-- @change="editDate" -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="reset">刷新</el-button>
      </el-form-item>
    </el-form>

    <!-- 基础数据 -->
    <p class="title">基础数据</p>
    <el-row type="flex" justify="space-around">
      <el-col
        :offset="1"
        :span="6"
      ><img src="@/assets/1.png" alt="" class="img">
        <span>线索数量:<span style="color: #0066ff">{{ getBaseInfoData.cluesNum }}</span></span>
      </el-col>
      <el-col
        :offset="1"
        :span="6"
      ><img src="@/assets/2.png" alt="" class="img">
        <span>商机数量:<span style="color: #0066ff">{{ getBaseInfoData.businessNum }}</span></span>
      </el-col>
      <el-col
        :offset="1"
        :span="6"
      ><img src="@/assets/3.png" alt="" class="img">
        <span>客户数量:<span style="color: #0066ff">{{ getBaseInfoData.contractNum }}</span></span>
      </el-col>
      <el-col
        :offset="1"
        :span="6"
      ><img src="@/assets/4.png" alt="" class="img">
        <span>销售金额:<span style="color: #0066ff">{{ getBaseInfoData.salesAmount }}</span></span>
      </el-col>
    </el-row>
    <el-divider />

    <!-- 今日简报 -->
    <p class="title">今日简报</p>
    <el-row type="flex" justify="space-around">
      <el-col :span="6" :offset="1">
        <div class="icon-wrapper">
          <img src="@/assets/5.png" alt="Icon" class="icon">
          <div class="text-wrapper">
            <div class="text-line">
              <p style="color: #00cc99; font-weight: bold; font-size: 16px">
                780
              </p>
            </div>
            <div class="text-line">今日新增线索</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :offset="1">
        <div class="icon-wrapper">
          <img src="@/assets/6.png" alt="Icon" class="icon">
          <div class="text-wrapper">
            <div class="text-line">
              <p style="color: #00cc99; font-weight: bold; font-size: 16px">
                560
              </p>
            </div>
            <div class="text-line">今日新增商机</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :offset="1">
        <div class="icon-wrapper">
          <img src="@/assets/7.png" alt="Icon" class="icon">
          <div class="text-wrapper">
            <div class="text-line">
              <p style="color: #00cc99; font-weight: bold; font-size: 16px">
                230
              </p>
            </div>
            <div class="text-line">今日新增客户</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :offset="1">
        <div class="icon-wrapper">
          <img src="@/assets/8.png" alt="Icon" class="icon">
          <div class="text-wrapper">
            <div class="text-line">
              <p style="color: #00cc99; font-weight: bold; font-size: 16px">
                110
              </p>
            </div>
            <div class="text-line">今日销售额</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider />

    <!-- 待办事项 -->
    <p class="title">代办事项</p>
    <el-row>
      <el-col :span="5" :offset="1">
        <img src="@/assets/10.png" alt="" class="img">
        <p>待跟进线索<span style="color: #0066ff">{{ TodoInfoData.tofollowedCluesNum }}</span></p>
      </el-col>
      <el-col :span="5" :offset="1">
        <img src="@/assets/11.png" alt="" class="img">
        <p>待跟进商机<span style="color: #0066ff">{{ TodoInfoData.tofollowedBusinessNum }}</span></p>
      </el-col>
      <el-col :span="5" :offset="1">
        <img src="@/assets/10.png" alt="" class="img">
        <p>待分配线索<span style="color: #0066ff">{{ TodoInfoData.toallocatedCluesNum }}</span></p>
      </el-col>
      <el-col :span="5" :offset="1">
        <img src="@/assets/11.png" alt="" class="img">
        <p>待分配商机<span style="color: #0066ff">{{ TodoInfoData.toallocatedBusinessNum }}</span></p>
      </el-col>
    </el-row>
    <el-divider />

    <!-- 线索转化漏斗 -->
    <el-row>
      <el-col :span="1.5">
        <img src="@/assets/13.png" alt="" class="img">
      </el-col>
      <el-col :span="2.5">
        <span style="line-height: 3" class="title"> 线索转化漏斗</span>
      </el-col>
      <el-col :span="12">
        <div ref="chart" class="mychart" />
      </el-col>
      <!-- <el-col :span="8"> -->
      <div style="position: relative; right: 10px; top: 150px">
        <p>
          有效线索转化：<span style="color: #0066ff">{{ infoData.effectiveCluesNums }}</span>
          线索转化率：<span style="color: #0066ff">{{ (infoData.effectiveCluesNums/ infoData.cluesNums*100).toFixed(0) }}%</span>
        </p>
        <p style="margin: 30px">
          商机转化：<span style="color: #0066ff">{{ infoData.businessNums }}</span> 商机转化率：<span
            style="color: #0066ff"
          >{{ (infoData.businessNums/ infoData.cluesNums*100).toFixed(0) }}%</span>
        </p>
        <p>
          客户转化：<span style="color: #0066ff">{{ infoData.contractNums }}</span> 客户转化率：<span
            style="color: #0066ff"
          >{{ (infoData.contractNums/ infoData.cluesNums*100).toFixed(0) }}%</span>
        </p>
      </div>
      <!-- </el-col> -->
    </el-row>

    <el-divider />
    <!-- 线索转化龙虎榜 -->
    <el-row :gutter="100">
      <el-col :span="12">
        <img src="@/assets/14.png" alt="" class="img">
        <span class="title">线索转化龙虎榜</span>
        <el-table :data="StatisticData">
          <el-table-column label="排名" type="index" />
          <el-table-column label="用户姓名" prop="name" />
          <el-table-column label="部门" prop="dept_name" />
          <el-table-column label="线索转化个数（个）" prop="num" />
          <el-table-column label="线索转化占比（%）" prop="radio" />
        </el-table>
      </el-col>

      <!-- 商机转化龙虎榜 -->
      <el-col :span="12">
        <img src="@/assets/14.png" alt="" class="img">
        <span class="title">商机转化龙虎榜</span>
        <el-table :data="businessData">
          <el-table-column label="排名" type="index" />
          <el-table-column label="用户姓名" prop="create_by" />
          <el-table-column label="部门" prop="dept_name" />
          <el-table-column label="线索转化个数（个）" prop="num" />
          <el-table-column label="线索转化占比（%）" prop="radio" />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getBaseInfoApi, getbusinessApi, getMapApi, getTodayInfoApi, getTodoInfoApi, getStatisticApi } from '@/api/workbench'
export default {
  name: 'Workbench',
  data() {
    return {
      value1: ['2000-01-01', '2023-06-30'],
      businessData: [{
        create_by: '张三',
        dept_name: '销售一部',
        num: 55,
        radio: 98
      },
      {
        create_by: '李四',
        dept_name: '销售二部',
        num: 48,
        radio: 28
      }],
      StatisticData: [{
        name: '李四',
        dept_name: '销售二部',
        num: 48,
        radio: 28
      },
      {
        name: '王五',
        dept_name: '销售一部',
        num: 95,
        radio: 35
      }],
      getBaseInfoData: {
        cluesNum: 1523,
        businessNum: 1633,
        contractNum: 1328,
        salesAmount: 6666
      },
      TodoInfoData: {
        tofollowedCluesNum: 89,
        tofollowedBusinessNum: 78,
        toallocatedCluesNum: 98,
        toallocatedBusinessNum: 90
      },
      MapData: [
        { value: 66, name: '有效线索数66' },
        { value: 70, name: '商机数70' },
        { value: 150, name: '线索总数150' },
        { value: 56, name: '客户数56' }
      ],
      infoData: { cluesNums: 150,
        effectiveCluesNums: 66,
        businessNums: 70,
        contractNums: 56 }
    }
  },
  watch: {
    MapData() {
      this.renderChart()
    }
  },
  mounted() {
    // 初始化图表数据
    this.renderChart()
  },
  methods: {
    /**
     * 渲染图表
     */
    renderChart() {
      const myChart = echarts.init(this.$refs.chart)
      myChart.resize({ width: '500px', height: '300px' })
      // await this.getMap(this.value1[0], this.value1[1])
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '1%', // 设置一个较小的值
            // right: '10%', // 设置一个较大的值
            width: '100%', // 设置充满容器的宽度
            top: 60,
            bottom: 60,
            height: '70%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            label: {
              show: true,
              position: 'inside',
              textStyle: {
                fontSize: 14
              }
            },
            labelLine: {
              show: true,
              length: 10, // 线的长度
              lineStyle: {
                color: '#cccccc',
                width: 1
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1,
              color: function(params) {
              // 自定义颜色逻辑
                const colors = ['#c280ff', '#6300bf', '#8080ff', '#81d3f8']
                return colors[params.dataIndex]
              }
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: this.MapData.map(item => ({
              value: item.value,
              name: item.name
            }))
          }
        ]
      }
      option && myChart.setOption(option)
    },
    /**
     * 点击刷新按钮
     */
    reset() {
      this.value1 = ['2000-01-01', '2023-06-30']
      this.search()
    },
    /**
     * 点击搜索按钮
     */
    search() {
      this.getBaseInfo({ beginCreateTime: this.value1[0], endCreateTime: this.value1[1] })
      this.getMap(this.value1[0], this.value1[1])
      this.getTodoInfo({ beginCreateTime: this.value1[0], endCreateTime: this.value1[1] })
      this.getbusiness({ beginCreateTime: this.value1[0], endCreateTime: this.value1[1] })
      this.getTodayInfo()
      this.getStatistic({ beginCreateTime: this.value1[0], endCreateTime: this.value1[1] })
    },
    /**
     * 基础数据
     * */
    async getBaseInfo(date) {
      const res = await getBaseInfoApi(date)
      this.getBaseInfoData = res.data
    },
    /**
     * 今日简报
     */
    async getTodayInfo() {
      await getTodayInfoApi()
    },
    /**
     * 代办事项
     */
    async getTodoInfo(date) {
      const { data } = await getTodoInfoApi(date)
      this.TodoInfoData = data
    },
    /**
     * 线索转化
     */
    async getStatistic(date) {
      const res = await getStatisticApi(date)
      this.StatisticData = res.data
    },
    /**
     * 商机转化
     */
    async getbusiness(date) {
      const res = await getbusinessApi(date)
      this.businessData = res.data
    },
    /**
     * 漏斗图
     */
    async getMap(data1, data2) {
      const { data } = await getMapApi(data1, data2)
      this.infoData = data
      this.MapData = [
        { value: data.effectiveCluesNums, name: '有效线索数' + data.effectiveCluesNums },
        { value: data.businessNums, name: '商机数' + data.businessNums },
        { value: data.cluesNums, name: '线索总数' + data.cluesNums },
        { value: data.contractNums, name: '客户数' + data.contractNums }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.databoard-container {
  img {
    width: 50px;
    height: 50px;
  }
  .icon-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .text-wrapper {
    display: flex;
    flex-direction: column;
  }

  .text-line {
    font-size: 14px;
  }
  .title {
    color: #888787;
    font-size: 18px;
    font-weight: 700;
  }
}
</style>

